import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// 导入拆分的模块
import common from "./modules/common";
import user from "./modules/user";

export default new Vuex.Store({
    // 状态，在mvvm框架中，数据源就称之为状态
    // 数据统一管理，含义就是数据都会放在state中
    state: {
        username: "zhangsan",
        age: 50,
        // 性别
        // gender：社交属性的性别
        // sex：生理属性的性别
        gender: 0,
    },
    // 修改状态的方法（同步）
    mutations: {
        // 更改用户名的方法，每个方法有2个形参：
        // state：state状态对象
        // arg：（可选）影响数据修改的变量
        setUsername(state, arg) {
            state.username = arg;
        },
        // 更改年龄的方法（调用一次+arg）
        setAge(state, arg) {
            // setTimeout(() => {
            state.age += arg;
            // }, 10000);
        },
        // ....
    },
    // 修改状态的方法（异步）
    // 虽然actions里写的是异步修改状态的方法，但是最终的数据修改依旧是muations做的，所以actions中的异步修改方法都要有一个与之对应的mutations方法
    actions: {
        // 每个异步的修改方法都有最少1个最多2个形参
        // context：上下文对象（store对象）
        // arg：可选）影响数据修改的变量
        setUsernameAsync(context, arg) {
            setTimeout(() => {
                // 异步代码最终还是通过mutation进行对数据的更改
                context.commit("setUsername", arg);
            }, 1000);
        },
        setAgeAsync(context, arg) {
            setTimeout(() => {
                context.commit("setAge", arg);
            }, 1000);
        },
    },
    // 对于数据源的加工和处理，有点类似于vue组件中的过滤器
    getters: {
        // getters里面的方法形参只有一个：state
        // 每个方法需要返回处理好的数据
        parseGender(state) {
            return state.gender == 0 ? "男" : "女";
        },
    },

    // 模块化
    modules: {
        // 注册各个模块
        common,
        user,
    },
});
